<template>
    <div>

        <el-dialog title="提示" :visible.sync="dialogVisible" width="70%">
            <div class="input-group mb-3">
                <input type="text" class="form-control" placeholder="用户ID号或昵称" @keyup.enter="search"
                       v-model="name">
                <a href="#" class="input-group-append" @click.prevent="search">
                    <span class="input-group-text">搜索</span>
                </a>
            </div>

            <table class="table mt-3 table-striped">
                <thead>
                <tr>
                    <th>编号</th>
                    <th>昵称</th>
                    <th style="width: 200px"></th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="user in users" :key="user.id">
                    <td class="align-middle">{{user.id}}</td>
                    <td class="align-middle">{{user.name}}</td>
                    <td class="align-middle text-right pr-2">
                        <button class="btn btn-info">设置为房管</button>
                    </td>
                </tr>
                </tbody>
            </table>

        </el-dialog>
        <button class="btn btn-info" @click="dialogVisible=true">{{title}}</button>
    </div>

</template>

<script>
    export default {
        props: {
            action: {required: true, type: String},
            title: { type: String, default: '设置房间管理员'},
        },
        data() {
            return {
                dialogVisible: false,
                users: [{id:1,name:'张三'},{id:2,name:'李四'}],
                name: ''
            }
        },
        methods: {
            async search() {
                let {data}= await this.axios.post(this.action, {name: this.name})
                this.users = data;
            }
        }

    };
</script>

<style>
</style>
